/*
* Created by: yyf
* Description: 基金管理--拟设立基金--编辑节点
*/
<template>
    <div>
        <!--节点编辑-->
        <div class="ca-node-box ca-m-b-20">
            <ul id="nodeBox1" class="clearfix">
                <li v-for="(item, index) in nodeParam" :key="item.id">
                    <div class="ca-node-text"><span>{{getNodeDate(item.nodeDate)}}</span></div>
                    <div class="ca-node-state cursor" @click="selectNode(item, index)" :class="getNodeColor(item.nodeStatus)"></div>
                    <div class="ca-node-text ca-node-color-666">{{item.name}}</div>
                    <div class="ca-node-line"></div>
                </li>
            </ul>
        </div>
        <!--编辑节点备注信息-->
        <div v-for="(item, index) in nodeParam" :key="item.id" v-show="(item.nodeStatus !== 0 || item.nodeStatus !== 1) && showNodeCheck[index]">
            <el-form ref="form" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="审核时间：">
                            <el-date-picker
                                type="date"
                                :value="item.nodeDate"
                                v-model="item.nodeDate"
                                placeholder="选择日期"
                                style="width:100%" >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：">
                            <el-input type="textarea" :maxlength="1000" v-model="item.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
//    import {api} from '__service/api';
//    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                arrNodeClass: {
                    '0': 'project-node--no-complete',
                    '1': 'project-node--conduct',
                    '2': 'project-node--completed',
                    '3': 'project-node--not-passed',
                    '4': 'project-node--suspend'
                },
                showNodeCheck: [],
            }
        },
        computed: {
        },
        props: {
            //node节点列表
            nodeParam: {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
        watch: {},
        mounted() {
            this.nodeParam.map((item, index)=>{
                this.showNodeCheck[index] = false;
            })
        },
        methods: {
            getNodeColor(data) {
                return this.arrNodeClass[String(data)];
            },
            //节点选择
            selectNode(item, index) {
                if (item.nodeStatus === 4) {//暂停
                    this.nodeParam[index].nodeStatus = 0;
                } else {
                    this.nodeParam[index].nodeStatus ++;
                }
                this.nodeParam.map((nodeItem, nodeIndex)=>{
                    this.showNodeCheck[nodeIndex] = false;
                    //点击当前节点
                    if (nodeIndex === index) {
                        //节点状态不是未开始，显示备注信息
                        if (item.nodeStatus !== 0 && item.nodeStatus !== 1) {
                            this.showNodeCheck[index] = true;
                        }
                    }
                })
            },
            getNodeDate(date) {
                if (date) {
                    return this.$moment(date).format('YYYY-MM-DD');
                }
            }
        },
        components: {}
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
